//二级菜单
function erjinav() {
    $('.fenye>ul>li').on({
        mouseover: function () {
            $('.erji').css('display', 'block')
        },
        mouseout: function () {
            $('.erji').css('display', 'none')
        }
    });
    $('.fenye .erji').on({
        mouseover: function () {
            $('.erji').css('display', 'block')
        },
        mouseout: function () {
            $('.erji').css('display', 'none')
        }
    });
}

erjinav()
//渲染轮播
async function showbanner() {
    //拿到轮播图片
    let data = await myPromise({
        url: 'http://api.yuguoxy.com/api/shop/banner',
        method: 'get',
        data: {

        }
    })
    let datalist = data.resultInfo.list
    let newstr = ''
    datalist.forEach(element => {
        let str = `<div class="swiper-slide"><img src="${element.url}" alt=""></div>`
        newstr += str
    });
    // console.log(data.resultInfo.list[0], newstr)
    $('.swiper-wrapper').html(newstr)
    //轮播
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: true, //等同于以下设置
    })
}
showbanner()
//渲染商品列表
let newdate = [] //商品数据
async function prolist(pageNoa) {
    let pageNo = pageNoa || 1

    let data = await myPromise({
        url: 'http://api.yuguoxy.com/api/shop/list',
        mothed: 'get',
        data: {
            pageSize: 8,
            pageNo: pageNo
        }
    })

    console.log(data.resultInfo.list)
    let newdate1 = data.resultInfo.list || []

    newdate = [...newdate, ...newdate1]
    let newstr = ''
    newdate.forEach(function (item) {
        let str = `<li id='${item.id}'>
                    <img src="${item.picture}" alt="">
                    <div>${item.shop}</div>
                    <span>淘宝</span>
                    <span>包邮</span>
                    <div>￥${item.price}<span>${item.oldprice}人已经买了</span></div>
                </li>`
        newstr += str
    })
    $('.prolist>ul').html(newstr)
}
prolist()
//查找功能
// let finddate = [] //找到的商品数据
function find() {
    // let pageNoa = pageNo || 1
    $('.sousuo>div').on('click', async function () {
        let keyword = $('.sousuo>input').val()
        let data = await myPromise({
            url: 'http://api.yuguoxy.com/api/shop/search',
            mothed: 'get',
            data: {
                keyword: keyword,
                pageSize: 8,
            }
        })
        console.log(data)
        let newdate1 = data.resultInfo.list || []

        finddate = [...newdate1]
        console.log(finddate)
        let newstr = ''
        finddate.forEach(function (item) {
            let str = `<li id='${item.id}'>
                    <img src="${item.picture}" alt="">
                    <div>${item.shop}</div>
                    <span>淘宝</span>
                    <span>包邮</span>
                    <div>￥${item.price}<span>${item.oldprice}人已经买了</span></div>
                </li>`
            newstr += str
        })
        $('.prolist>ul').html(newstr)
        $('.chakan').css('display', 'none')
        $('.chakanp').css('display', 'block')
    })

}
// 回到首页
function reindex() {
    $('.firstli').on('click', function () {
        newdate = []
        prolist(1)
        $('.chakan').css('display', 'block')
        $('.chakanp').css('display', 'none')
    })
}
reindex()
find()
//查看更多
function gendo() {
    let pageNo = 1
    $('.chakan').on('click', function () {
        prolist(++pageNo)
        iswan()
    })

}
gendo()
//判断是否完了
async function iswan() {
    let pageSize = 8
    let data = await myPromise({
        url: 'http://api.yuguoxy.com/api/shop/list',
        mothed: 'get',
        data: {
            pageSize: pageSize
        }
    })
    console.log(data.resultInfo.total - pageSize)
    if (newdate.length >= data.resultInfo.total - pageSize) {
        $('.chakan').css('display', 'none')
        $('.chakanp').css('display', 'block')
    }

}
iswan()
//返回顶部
function runtop() {
    function topFunction() {
        let set = setInterval(function () {
            document.documentElement.scrollTop -= 20;
            console.log(document.documentElement.scrollTop)
            if (document.documentElement.scrollTop == 0) {

                clearInterval(set)
            }
        }, 1)
    }
    window.onscroll = function () {
        if (document.documentElement.scrollTop >= 200) {
            $('.icon-huidaodingbu1').css('display', 'block')
        } else {
            $('.icon-huidaodingbu1').css('display', 'none')
        }
    }
    $('.icon-huidaodingbu1').on('click', function () {
        topFunction()
    })
}
runtop()
//跳转商品详情页
function Prodate() {
    $('.prolist>ul').on('click', 'li', function () {
        console.log($(this).attr('id'))
        let id = Number($(this).attr('id'))
        window.location.href = `details.html?id=${id}`
    })
}
Prodate()
//切换首页
function table() {
    let sy = `<ul>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
    <li><span class="iconfont icon-nvzhuangneiyi">&ensp;&ensp;<div>女装</div>/<div>女鞋</div></span></li>
</ul>
<div class="erji">
    <h5>女装</h5>
    <span>
        <a href="">衬衫</a>
        <a href="">裤装</a>
    </span>

    <h5>女鞋</h5>
    <span>
        <a href="">帆布鞋
        </a>
        <a href="">高跟鞋</a>
        <a href="">单鞋</a>
        <a href="">小白鞋</a>
        <a href="">运动鞋</a>
    </span>
</div> -->
<!-- 轮播 -->
<div class="swiper">
    <div class="swiper-wrapper"> 
         <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
     <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>
<img src="./img/1.png" alt="" class="firstimg">
<div class="bootomimg clearfix">
    <img src="./img/2.png" alt="">
    <img src="./img/3.png" alt="">
    <img src="./img/4.png" alt="">
</div>`
    let jiu=`<div class="  container jiudiv ">9块9专区  </div>
    <ul class="jiu">
        <li>精选</li>
        <li>美妆护肤</li>
        <li>服装配饰</li>
        <li>手机数码</li>
        <li>日用家居</li>
        <li>文娱体育</li>
        <li>食品</li>
        <li>个人护理</li>
    </ul>`
    $('.container>ul').on('click', 'li', function (e) {
        if ($(e.target).html() == '9块9包邮') {
            $(e.target).css('background-color' ,'rgb(254, 228, 78)')
            .siblings().css('background-color' ,'rgb(67, 36, 12)')
            $('.fenye ').html(jiu)
        }
        if ($(e.target).html() == '首页') {
            $(e.target).css('background-color' ,'rgb(254, 228, 78)')
            .siblings().css('background-color' ,'rgb(67, 36, 12)')
            $('.fenye ').html(sy)
            showbanner()
        }
    })
}
table()